flex布局

注意点： flex布局下的，子元素的float,clear,vertical-align将会失效

Flex容器：display: flex 指定盒子为容器

Flex项目：flex容器下的元素

主轴main axis：默认水平方向

交叉轴cross axis：默认垂直方向

主轴起点main start/主轴起点main end

交叉轴起点cross start/交叉轴重点cross end

容器上的属性

flex-direction 主轴方向
- row （默认）从左到右
- row-reverse 从右到左
- column 从上到下
- Column 从下到上
flex-wrap 是否换行
- Nowrap (默认) 不换行
- wrap 换行/第一行在上
- wrap-revers 换行/第一行在上
flex-flow 主轴和换行合并的简写
Justify-content 项目对齐方式
- flex-start 左对齐
- flex-end 右对齐
- center 居中
- Space-between 两端对齐，间隔均等
- Space-around 项目两侧间隔相等
Align-items 项目交叉轴对齐方式
- flex-start
- flex-end
- center
- baseling 项目的第一行文字的基线
- stretch
Align-content 轴的对齐方式（单轴不生效）
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。

项目上的属性